<template>
    <div id="Categories">
        <my-breadcrumb/>
        <el-row class="main">
            <el-row>
                <el-col :span="6">
                    <el-button type="primary" size="small" @click="addClassifybtn" style="margin-bottom:10px">添加分类</el-button>
                    <my-dialog :btnOption='btnOption.addClassifybtn' :isShow.sync='addClassify'/>
                </el-col>
            </el-row>
            <!-- 表格 -->
            <!-- <el-row style="margin-top:20px">
                <my-table-one 
                :tableOptions='tableOptions' 
                :tableData='tableData'
                :treeTableOptions='treeTableOptions'>
                    <template #option='scope'>
                        <div>
                            <el-button type="primary" icon="el-icon-edit" size="mini" @click="handlyEdit(scope.slotData)">编辑</el-button>
                            <el-button class="margin-left-10" type="danger" icon="el-icon-delete" size="mini" @click="handlyDelete(scope.slotData)">删除</el-button>
                        </div>
                    </template> 
                    <template #icon='scope'>
                        <div >
                            <template v-if="!scope.slotData.cat_deleted">
                                <i class="el-icon-success" style="color:green"></i>
                            </template>
                            <template v-else>
                                <i class="el-icon-error" style="color:red"></i>
                            </template>
                        </div>
                    </template> 
                        
                    <template #levelTag='scope'>
                        <div>
                            <my-tag :levelData='String(scope.slotData.cat_level)'/>
                        </div>
                    </template> 
                </my-table-one>
            </el-row> -->
            
            <zk-table
                ref="table"
                sum-text="sum"
                index-text="#"
                :data="tableData"
                :columns="tableOptions"
                :stripe="props.stripe"
                :border="props.border"
                :show-header="props.showHeader"
                :show-summary="props.showSummary"
                :show-row-hover="props.showRowHover"
                :show-index="props.showIndex"
                :tree-type="props.treeType"
                :is-fold="props.isFold"
                :expand-type="props.expandType"
                :selection-type="props.selectionType">
                <template #option='scope'>
                    <div>
                        <el-button type="primary" icon="el-icon-edit" size="mini" @click="handlyEdit(scope.row)">编辑</el-button>
                        <el-button class="margin-left-10" type="danger" icon="el-icon-delete" size="mini" @click="handlyDelete(scope.row)">删除</el-button>
                    </div>
                </template> 
                <template #icon='scope'>
                    <div >
                        <template v-if="!scope.row.cat_deleted">
                            <i class="el-icon-success" style="color:green"></i>
                        </template>
                        <template v-else>
                            <i class="el-icon-error" style="color:red"></i>
                        </template>
                    </div>
                </template> 
                <template #levelTag="scope">
                    <div>
                        <my-tag :levelData='String(scope.row.cat_level)'/> 
                    </div>
                </template>
            </zk-table>
            <!-- 分页 -->
            <el-row>
                <el-col :span="24">
                    <my-pagination :pageOption='pageOption'/>
                </el-col>
            </el-row>
        </el-row>
    </div>
</template>
<script>
export default {
    name:'Categories',
    data() {
        return {
            props: {
                stripe: false,
                border: true,
                showHeader: true,
                showSummary: false,
                showRowHover: true,
                showIndex: true,
                treeType: true,
                isFold: true,
                expandType: false,
                selectionType: false,
            },
            tableOptions:[
                {prop:'cat_name',label:'分类名称',minWidth:'100'},
                {prop:'cat_deleted',label:'是否有效',minWidth:'100',template:'icon',type:'template'},
                {prop:'cat_level',label:'排序',minWidth:'100',template:'levelTag',type:'template'},
                {prop:'option',label:'操作',minWidth:'100',template:'option',type:'template'},
            ],
            tableData: [],
            treeTableOptions:{
                    row_key:'cat_id',  
                    default_expand_all:true,
                    tree_props_options:{children: 'children',hasChildren:'hasChildren'}
            },
            btnOption:{
                addClassifybtn:{
                    txt:'添加分类',
                }
            },
            addClassify:false,
            pageOption:{
                current_page:1,
                page_sizes:[2, 4, 8, 10],
                page_size:100,  
                layout:'total, sizes, prev, pager, next, jumper',
                background:false,
                total:0
            }}
    },
    methods: {
        //点击配置按钮
        addClassifybtn(row){
            //点击弹出
            this.addClassify=true;
    },
        handlyEdit(){},
        handlyDelete(){}

    },
    mounted(){
        //获取分类列表
        this.$store.dispatch('categorie/Acs_getCategories')
        .then(res=>{
            //console.log(res);
            this.$store.commit('categorie/CHANGE_CATEGORIES_DATA',res)
             //修改总页数
            this.$store.commit('categorie/CHANGE_TOTAL',res.length);
            //this.tableData=res;
        })
        .catch(err=>{
            console.log(err);
        })
    },
    watch:{
        '$store.state.categorie.categories_data':{
            handler:function(newVaL,oldVal){
                this.tableData=newVaL;
            },
            deep:true,
            immediate:true,
        },
        '$store.state.categorie.paginationData.total':function(newVal,oldVal){
            this.pageOption.total=newVal;
        },
    }
}
</script>
<style lang="scss" scoped>
    #Categories{
        .main{
                margin-top: 15px;
                background: #fff;
                padding: 20px;
            } } 
</style>